<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
  <script>

    var data = [
      {
        number: 4, name: "北京"
      },
      {
        number: 8, name: "上海"
      }
      ,
      {
        number: 15, name: "天津"
      },
      {
        number: 16, name: "南京"
      },
      {
        number: 23, name: "重庆"
      },
      {
        number: 42, name: "武汉"
      }
    ]

    var svg = d3.select('body').append('svg')
      .attr('width', 500)
      .attr('height', 500)
      .style('background', '#efefef');

    //1:生成环（弧）形
    var arcs = d3.arc().innerRadius(50).outerRadius(200);

    //2:生成角度数据
    var angle_datas = d3.pie().value((d) => d.number)(data)

    console.log(angle_datas)

    var colors = d3.schemeCategory10;

    svg.append('g')
      .attr('transform', 'translate(220,220)')
      .selectAll('path')
      .data(angle_datas)
      .enter()
      .append('path')
      .attr('d', (d) => {
        console.log('d:', arcs(d))
        return arcs(d)
      })
      .style('fill', function (d, i) {
        return colors[i % 10]
      })


    var g_text = svg.append('g')
      .classed('textgrop', true)
      .attr('transform', 'translate(220,220)');

    g_text.selectAll('text')
      .data(angle_datas)
      .enter()
      .append('text')
      .attr('text-anchor', 'middle')
      .text((d) => d.data.name + "(" + d.data.number + ")")
      .attr('x', function (d, i) {
        console.log(arcs.centroid(d))
        return arcs.centroid(d)[0];
      })
      .attr('y', function (d) {
        return arcs.centroid(d)[1]
      })


  </script>

</body>

</html>